{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>{% block title %}RBAC权限管理系统{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 移动端优化样式 */
        @media (max-width: 768px) {
            .form-control, .form-select {
                font-size: 16px;
                padding: 12px;
                margin-bottom: 15px;
            }

            .btn {
                padding: 12px 20px;
                font-size: 16px;
                margin-top: 10px;
            }

            .container {
                padding: 15px;
            }

            h1, h2, h3 {
                margin-bottom: 20px;
            }
        }
        
        .navbar-brand {
            font-weight: bold;
            padding: 0.5rem 1rem;
        }
        
        .brand-mettler {
            color: #ffffff !important; /* 白色 */
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .brand-service {
            color: #66CC99 !important; /* 浅绿色 */
            font-weight: 700;
            font-size: 1.1rem;
            margin-left: 0.25rem;
        }
        
        /* 导航栏颜色优化 */
        .navbar-custom {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .navbar-custom .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .navbar-custom .navbar-nav .nav-link:hover {
            color: #66CC99 !important;
            transform: translateY(-1px);
        }
        
        .navbar-custom .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        .navbar-custom .dropdown-menu {
            background-color: #ffffff;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .navbar-custom .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #2a5298;
        }
        
        .rbac-content {
            padding: 20px;
        }
        
        /* 应用级侧边栏样式 */
        .app-sidebar {
            min-height: calc(100vh - 56px);
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
        }
        
        .app-sidebar .nav-link {
            color: #495057;
            padding: 0.75rem 1rem;
            border-radius: 0;
        }
        
        .app-sidebar .nav-link:hover,
        .app-sidebar .nav-link.active {
            color: #0d6efd;
            background-color: rgba(13, 110, 253, 0.1);
        }
        
        /* 面包屑样式 */
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 1rem;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: ">";
            color: #6c757d;
        }
        
        .permission-group {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            margin-bottom: 15px;
        }
        
        .permission-group-header {
            background-color: #f8f9fa;
            padding: 10px 15px;
            border-bottom: 1px solid #dee2e6;
            font-weight: bold;
        }
        
        .permission-group-body {
            padding: 15px;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
        <div class="container-fluid">
            <a class="navbar-brand" href="{% url 'rbac:dashboard' %}">
                <i class="fas fa-cog me-2"></i>
                <span class="brand-mettler">METTLER TOLEDO</span>
                <span class="brand-service">Service</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                {% if current_user.id %}
                <ul class="navbar-nav me-auto">
                    <!-- 欢迎页面 - 所有用户都可访问 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:welcome' %}">
                            <i class="fas fa-home"></i> 欢迎页面
                        </a>
                    </li>
                    
                    <!-- 仪表板 - 所有用户都可访问 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:dashboard' %}">
                            <i class="fas fa-tachometer-alt"></i> 仪表板
                        </a>
                    </li>
                    
                    <!-- 管理功能 - 仅管理员或超级用户可见 -->
                    {% if current_user.is_superuser or is_admin %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:user_management' %}">
                            <i class="fas fa-users"></i> 用户管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:role_list' %}">
                            <i class="fas fa-user-tag"></i> 角色管理
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:permission_list' %}">
                            <i class="fas fa-key"></i> 权限列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'rbac:menu_list' %}">
                            <i class="fas fa-bars"></i> 菜单管理
                        </a>
                    </li>
                    {% endif %}
                </ul>
                
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user"></i> {{ current_user.username }}
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{% url 'rbac:account_info' %}">
                                <i class="fas fa-user-cog"></i> 账户信息
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'rbac:logout' %}">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </a></li>
                        </ul>
                    </li>
                </ul>
                {% endif %}
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container-fluid">
        {% if current_user.id %}
        <div class="row">
            <!-- 应用级导航栏（为将来的应用子导航预留） -->
            {% block app_sidebar %}
            <!-- 当进入具体应用时，这里显示应用级导航 -->
            {% endblock %}
            
            <!-- 主内容区域 -->
            <main class="{% block main_class %}col-12{% endblock %} px-md-4 rbac-content">
                <!-- 面包屑导航 -->
                {% block breadcrumb %}
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'rbac:welcome' %}"><i class="fas fa-home"></i> 首页</a></li>
                        {% block breadcrumb_items %}{% endblock %}
                    </ol>
                </nav>
                {% endblock %}
                
                <!-- 消息提示 -->
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endif %}
                
                {% block content %}{% endblock %}
            </main>
        </div>
        {% else %}
        <main class="col-12 rbac-content">
            {% block login_content %}{% endblock %}
        </main>
        {% endif %}
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    {% block extra_js %}{% endblock %}
    
    <script>
        // 获取CSRF Token
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        
        // 设置AJAX请求的CSRF Token
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                }
            }
        });
    </script>
</body>
</html>